@import '@/assets/css/public';
.main2SignalGraph2{
	color:#fff;
	.wrapper{
	  .ctn{
			border: 1px solid #e3e5e4;
			height: 920px;
			box-sizing: border-box;
			display: flex;
			& > div + div{
				border-left: 1px solid #e3e5e4;
			}
			.one{
				flex:1;
				overflow:hidden;
				.oneTop{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.oneBtm{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.oneBtm_top{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 20px 0;
						& > p{
							margin-bottom: 15px;
							font-size: 16px;
						}
						.inner{
							width: 150px;
							height: 80px;
							border: 2px solid #ff7260;
							display: flex;
							align-items: center;
							.innerLeft{
								border: 1px solid #ff7260;
								flex:1.5;
								overflow: hidden;
								height: 40px;
								margin-left: 5px;
								position: relative;
								& > span{
									display: block;
									font-size: 28px;
									color: #ff7260;
									transform: rotate(45deg);
									position: absolute;
									top:5px;
									left: 10px;
								}
							}
							.innerRight{
								height: 100%;
								flex:2;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								& > p{
									font-size: 14px;
									text-align: right;
									margin: 5px 5px 0 0;
								}
								.AB{
									flex:1;
									overflow: hidden;
									display: flex;
									justify-content: flex-end;
									align-items: flex-end;
									margin: 0 10px 5px 0;
									.A{
										display: flex;
										flex-direction: column;
										align-items: center;
										& > p{
											font-size: 12px;
											margin-bottom: 5px;
										}
										.imgBox{
											width: 30px;
											height: 30px;
											& > img{
												width: 100%;
												height: 100%;
											}
										}
									}
									.B{
										display: flex;
										flex-direction: column;
										align-items: center;
										& > p{
											font-size: 12px;
											margin-bottom: 5px;
										}
										.imgBox{
											width: 30px;
											height: 30px;
											& > img{
												width: 100%;
												height: 100%;
											}
										}
									}
								}
							}
						}
					}
					.oneBtm_mid{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 40px;
						& > div + div{
							margin-top: 10px;
						}
						& > div{
							padding-right: 10px;
							border: 1px solid #e3e5e4;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: center;
							.icon{
								width: 50px;
								height: 40px;
								& > div{
									transform: scale(.7) !important;
									margin-top: -5px;
								}
							}
						}
					}
					.oneBtm_btm{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10px;
						box-sizing: border-box;
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 100%;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
				}
			}
			.two{
				flex:1;
				overflow:hidden;
				display: flex;
				flex-direction: column;
				.twoTop{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.twoBtm{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > div + div{
						border-top: 1px solid #e3e5e4;
					}
					.twoBtm_top{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 20px;
						padding: 0 10px;
						box-sizing: border-box;
						& > ul{
							width: 100%;
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
					.twoBtm_btm{
						flex:1;
						overflow: hidden;
						.twoBtm_btmTop{
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom: 1px solid #e3e5e4;
							& > p{
								font-size: 16px;
							}
						}
						.twoBtm_btmBtm{
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: 20px;
							padding: 0 10px;
							box-sizing: border-box;
							& > ul{
								width: 100%;
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > div{
										padding: 5px;
									}
								}
							}
						}
					}
				}
			}
			.three{
				flex:1;
				overflow:hidden;
				display: flex;
				flex-direction: column;
				.threeTop{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.threeBtm{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20px;
					padding: 0 10px;
					box-sizing: border-box;
					& > ul{
						width: 100%;
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						& > li + li{
							margin-top: 2px;
						}
						& > li{
							width: 100%;
							text-align: center;
							// border: 1px solid #e3e5e4;
							// padding: 5px 0;
							box-sizing: border-box;
							& > div{
								padding: 5px;
							}
						}
					}
				}
			}
			.four{
				flex:1.8;
				overflow:hidden;
				display: flex;
				flex-direction: column;
				.fourTop{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.fourBtm{
					flex:1;
					overflow: hidden;
					display: flex;
					& > div + div{
						border-left: 1px solid #e3e5e4;
					}
					.fourBtm_left{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10px;
						box-sizing: border-box;
						& > ul{
							width: 100%;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 20px 0;
							box-sizing: border-box;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
					.fourBtm_right{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 20px 10px;
						box-sizing: border-box;
						& > ul{
							width: 100%;
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
				}
			}
			.five{
				flex:1.8;
				overflow:hidden;
				display: flex;
				flex-direction: column;
				.fiveTop{
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.fiveBtm{
					flex:1;
					overflow: hidden;
					display: flex;
					& > div + div{
						border-left: 1px solid #e3e5e4;
					}
					.fiveBtm_left{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10px;
						box-sizing: border-box;
						& > ul{
							width: 100%;
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 20px 0;
							box-sizing: border-box;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
					.fiveBtm_right{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10px;
						box-sizing: border-box;
						& > ul{
							width: 100%;
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 20px 0;
							box-sizing: border-box;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > div{
									padding: 5px;
								}
							}
						}
					}
				}
			}
	  }
	}
}
